<template>
	<view class="toast_mode">
		<view class="alert_content">
			<view class="del" @click="cancel">
				<image src="../../../static/delete.png" mode="aspectFill"></image>
			</view>
			<view class="alert_top_title">
				<view class="alert_top_title_name">创建账号</view>
			</view>
			<view class="alert_center">
				<input type="text" class="alert_input" v-model="name" placeholder="请输入姓名" />
				<input type="text" class="alert_input" v-model="account" placeholder="请输入账号" />
				<input type="password" class="alert_input" v-model="pwd" placeholder="请输密码" />
				<view class="alert_center_category">
					<view class="alert_center_category_title">账号类型</view>
					<radio-group @change="setStatus" class="status_set">
						<label class="radio_label" v-for="item in radioGroup" :key="index">
							<radio :value="item.status" :checked="item.status==type" /><text>{{item.name}}</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="alert_btn" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				account:'',
				pwd:'',
				type:1,
				radioGroup:[
					{status:1,name:'跑腿账户'},
					{status:2,name:'商户账户'},
				]
			}
		},
		methods: {
			cancel(){
				this.$emit('cancelCreate')
			},
			submit(){
				this.$emit('submitCreate',{account:this.account,pwd:this.pwd,name:this.name,type:this.type})
			},
			setStatus(e){
				console.log(e)
				let that = this
				for (let i = 0; i < that.radioGroup.length; i++) {
					if (that.radioGroup[i].status === Number(e.target.value)) {
						that.type = Number(e.target.value);
						break;
					}
				}
			}
		}
	}
</script>

<style>
	.alert_center_category{
		width: 510rpx;
		float: left;
		margin-top: 24rpx;
	}
	.alert_center_category_title{
		width: 100%;
		margin-left: 22rpx;
		color: #191B1E;
		font-size: 28rpx;
		font-weight: 700;
		float: left;
	}
	.radio_label{
		margin-left: 20rpx;
	}
	.toast_mode{
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		width: 750rpx;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 999999;
	}
	.alert_content{
		width: 600rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		z-index: 1000000;
		position: absolute;
		top: 360rpx;
		left: 76rpx;
		padding-bottom: 27px;
	}
	.del{
		width: 600rpx;
		float: right;
	}
	.del image{
		width: 24rpx;
		height: 24rpx;
		margin: 26rpx 26rpx 0 0;
		float: right;
	}
	.alert_top_title{
		width: 600rpx;
		height: 50rpx;
		float: left;
	}
	.alert_top_title_name{
		color: #191B1E;
		font-size: 36rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: 700;
	}
	.alert_center{
		width: 510rpx;
		height: auto;
		margin: 10rpx 44rpx 0 46rpx;
		float: left;
	}
	.alert_input{
		width: 450rpx;
		height: 80rpx;
		border-radius: 4rpx;
		background-color: #F6F6F6;
		color: #999999;
		font-size: 28rpx;
		line-height: 80rpx;
		padding: 0 34rpx 0 34rpx;
		margin-top:28rpx;
		float: left;
		display: block;
		border-radius: 46rpx;
	}
	.alert_btn{
		width: 510rpx;
		height: 92rpx;
		margin-left: 46rpx;
		margin-top: 40rpx;
		background-image: linear-gradient(to right,#6B96FE,#4D84FE);
		border-radius: 46rpx;
		color: #F9F9F9;
		font-weight: 700;
		font-size: 28rpx;
		line-height: 92rpx;
		text-align: center;
		float: left;
	}
</style>
